<template>
  <div class="container">
    <div class="input-group">
      <input type="text" class="input-field" v-model="SearchValue" placeholder="请输入内容..." />
      <button class="submit-btn" @click="submit">搜索</button>
    </div>

    <div class="Recording">
      <div style="width: 600px">
        <span class="Warning item-with-separator" v-for="item in Recording" :key="item" @click="handleClick(item)">{{ item }} </span>
      </div>
      <div style="width: 100px">
        <el-icon v-if="Recording.length != 0" :class="{ 'hand-cursor': isHovered }" @click="DeleteRD" @mouseover="isHovered = true" @mouseout="isHovered = false">
          <Delete />
        </el-icon>
      </div>
    </div>

    <div class="group-title">
      <h2>{{ route.params.id }} - {{ "搜索结果" }}</h2>
    </div>

    <div class="group-filter">
      <div style="margin-right: 10px">
        <label for="filter1">筛选条件1 </label>
        <select id="filter1" v-model="selectedFilter1">
          <option value="">所有</option>
          <option value="条件1-1">条件1-1</option>
          <option value="条件1-2">条件1-2</option>
          <option value="条件1-3">条件1-3</option>
          <option value="条件1-4">条件1-4</option>
        </select>
      </div>

      <div>
        <label for="filter2">筛选条件2 </label>
        <select id="filter2" v-model="selectedFilter2">
          <option value="">所有</option>
          <option value="条件2-1">条件2-1</option>
          <option value="条件2-2">条件2-2</option>
          <option value="条件2-3">条件2-3</option>
          <option value="条件2-4">条件2-4</option>
          <option value="条件2-5">条件2-5</option>
          <option value="条件2-6">条件2-6</option>
        </select>
      </div>
    </div>

    <div style="display: flex; flex-wrap: wrap" v-if="figure">
      <div class="group-card" v-for="item in 6" :key="item" @click="onGroupClick1(item)">
        <img src="/logo.png" alt="头像" class="card-avatar" />
        <div class="card-content">
          <h3 class="card-title">这里是标题</h3>
          <p class="card-description">这是一个简短的描述，用于介绍更多信息。</p>
          <div class="card-stats">
            <span class="stats-label">数量:</span>
            <span class="stats-value">123</span>
          </div>
        </div>
      </div>
    </div>

    <div class="group-content">
      <div class="content-1">
        <div class="content-1-list" v-for="content in correlation" :key="content" @mouseover="onMouseEnter1(content.id)" @mouseout="onMouseLeave1(content.id)" @click="onLinkClick1(content.id)">
          <div class="video-preview">
            <video :src="content.video" style="width: 100%; height: 100%; object-fit: fill" muted loop preload="metadata" playsinline></video>
            <img :src="content.imageUrl" alt="" />
          </div>
          <NuxtLink :to="'/content/' + content.id">{{ content.description }}</NuxtLink>
        </div>
      </div>
    </div>

    <div class="group-pagination">
      <button @click="previousPage" v-if="currentPage != 1" class="pagination-button">上一页</button>
      <input type="text" min="1" :max="totalPages" v-model.number="currentPage" @change="onPageChange" class="pagination-input" />
      /
      <span>{{ totalPages }}</span>
      <button @click="nextPage" v-if="currentPage != totalPages" class="pagination-button">下一页</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Right, Delete } from "@element-plus/icons-vue";

const route = useRoute();

function isAllChinese(str: any) {
  // 正则表达式，匹配任意数量的汉字
  const regex = /^[\u4e00-\u9fa5]+$/;
  return regex.test(str);
}

const figure = ref(false);

if (isAllChinese(route.params.id)) {
  figure.value = true;
} else {
  figure.value = false;
}

const SearchValue = ref("");

const router = useRouter();

const submit = () => {
  console.log(SearchValue.value);
  router.push({ path: `/search/${SearchValue.value}` });
};

const Recording = ref(Array.from({ length: 99 }, (_, i) => (i + 1).toString()));

const handleClick = (e: any) => {
  console.log(e);
  router.push({ path: `/search/${e}` });
};

const DeleteRD = () => {
  console.log("删除");
  Recording.value = [];
};

const isHovered = ref(false);

const selectedFilter1 = ref<any>("");
const selectedFilter2 = ref<any>("");

watchEffect(() => {
  console.log("selectedFilter1 的值已更新为:", selectedFilter1.value);
  console.log("selectedFilter2 的值已更新为:", selectedFilter2.value);
});

const currentPage = ref<any>(1);
const totalPages = ref(999); // 根据实际数据动态计算

const previousPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--;
  }
};

const nextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++;
  }
};

const onPageChange = () => {
  const newPage = parseInt(currentPage.value);
  if (!isNaN(newPage) && newPage >= 1 && newPage <= totalPages.value) {
    currentPage.value = newPage;
  } else {
    currentPage.value = 1; // 如果输入无效，重置为第一页
  }
};

let contentObjTemplate: any = {
  imageUrl: "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
  video: "https://vjs.zencdn.net/v/oceans.mp4",
  id: 0,
  description: "推荐商品${i}的描述信息，这可以是任何相关的详细介绍。",
};

let lastId = 0;

let correlation = Array.from({ length: 10 }, (_, index) => {
  let newObj = Object.assign({}, contentObjTemplate);
  newObj.id = lastId + index + 1; // 注意：index是从0开始的，所以需要+1以匹配期望的id序列
  newObj.description = newObj.description.replace("${i}", index + 1);
  return newObj;
});

const videoPlayers: any = {};

const onMouseEnter1 = (id: any) => {
  if (videoPlayers[id]) {
    videoPlayers[id].play();
    videoPlayers[id].style.opacity = 1;
  }
};

const onMouseLeave1 = (id: any) => {
  if (videoPlayers[id]) {
    videoPlayers[id].pause();
    videoPlayers[id].currentTime = 0;
    videoPlayers[id].style.opacity = 0;
  }
};

const onLinkClick1 = (id: any) => {
  router.push({ path: `/content/${id}` });
};

const onGroupClick1 = (id: any) => {
  router.push({ path: `/grouping/${id}` });
};

onMounted(() => {
  correlation.forEach((item: any) => {
    videoPlayers[item.id] = document.querySelector(`video[src="${item.video}"]`);
  });
});
</script>

<style scoped>
.container {
  width: 1600px;
  margin: 20px auto;
  max-width: 100%;
  box-sizing: border-box;
}

.input-group {
  position: relative;
  width: 700px;
  margin: 20px auto;
}

.input-field {
  width: 600px;
  padding: 15px 20px;
  border-radius: 25px;
  border: 1px solid #ddd;
  outline: none;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
  font-size: 14px;
  transition: all 0.3s ease;
}

.input-field:focus {
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
}

/* 按钮样式 */
.submit-btn {
  position: absolute;
  right: 0;
  top: 0;
  width: 100px;
  height: 100%;
  padding: 0 20px;
  border: none;
  outline: none;
  background-color: #007bff;
  color: white;
  cursor: pointer;
  border-radius: 0 25px 25px 0;
  font-size: 14px;
  transition: all 0.3s ease;
}

.submit-btn:hover {
  background-color: #0056b3;
}

/* 输入框聚焦时按钮效果 */
.input-field:focus + .submit-btn {
  background-color: #0056b3;
}

.Recording {
  width: 700px;
  text-align: left;
  margin: auto;
  display: flex;
}

.Warning {
  color: #e6a23c;
}

.Warning:hover {
  cursor: pointer;
  color: #007bff;
}

.item-with-separator:not(:last-child)::after {
  content: " ";
  margin: 0 5px; /* 可根据需要调整分隔符与文本的间距 */
}

.hand-cursor {
  cursor: pointer;
}

.group-title {
  text-align: center;
  margin-bottom: 20px;
}

.group-filter {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.group-pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.group-pagination button {
  margin: 0 5px;
}

.pagination-button {
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f0f0f0;
  cursor: pointer;
  /* background-color: #333;
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  outline: none;
  margin-right: 10px; */
}

.pagination-input {
  width: 50px;
  height: 30px;
  text-align: center;
  border: 1px solid #ccc;
  outline: none;
  margin-right: 10px;
}

.content-1 {
  margin: 20px 0;
  height: 500px;
  /* background-color: #475669; */
  width: 1600px;

  display: flex;
  flex-wrap: wrap;
}

.content-1-list {
  height: 200px;
  flex: 0 0 calc(20% - 10px); /* 五等分减去间距 */
  margin: 5px; /* 控制间距 */
}

a {
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  white-space: nowrap;
  width: 300px;
  display: inline-block;
  text-decoration: none;
  color: #333;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

img:hover {
  cursor: pointer;
}

a:hover {
  cursor: pointer;
  color: #409eff;
}

.video-preview {
  cursor: pointer; /* 添加这行代码 */
  position: relative;
  width: 310px;
  height: 200px;
}
.video-preview video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0; /* 初始不显示 */
  transition: opacity 0.3s ease-in-out; /* 平滑过渡 */
}

.group-card {
  display: flex;
  align-items: center;
  padding: 20px;
  background-color: #ffffff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  flex: 0 0 calc(30% - 10px); /* 五等分减去间距 */
  margin: 10px; /* 控制间距 */
}

.group-card:hover {
  cursor: pointer;
}

.card-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 20px;
}

.card-content {
  flex: 1;
}

.card-title {
  margin: 0 0 10px;
  font-size: 18px;
  color: #333;
}

.card-description {
  color: #666;
  line-height: 1.5;
}

.card-stats {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.stats-label {
  color: #999;
  margin-right: 5px;
}

.stats-value {
  font-weight: bold;
  color: #333;
}

.group-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.group-filter select {
  appearance: none; /* 移除默认样式，适用于大多数浏览器 */
  -moz-appearance: none; /* Firefox */
  -webkit-appearance: none; /* Safari 和 Chrome */
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
  outline: none;
  width: 170px; /* 您可以根据需要调整宽度 */
}

.group-filter select:focus {
  border-color: #5bc0de;
}

/* 自定义下拉箭头 */
.group-filter select::after {
  content: "\25BC"; /* 下三角符号 */
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  pointer-events: none; /* 确保点击箭头时仍能选择选项 */
  color: #999;
}
</style>
